<template>
  <div class="chart-box">
    <!-- 饼图 -->
    <LsEcharts id="pie" type="pie" height="250px" :options="pieData"></LsEcharts>
    <!-- 折线图 -->
    <LsEcharts id="line" height="250px" type="line" :options="lineData"></LsEcharts>
    <!-- 柱状图 -->
    <LsEcharts id="bar" type="bar" height="250px" :options="barData"></LsEcharts>
    <!-- 堆叠柱状图 -->
    <LsEcharts id="barStack" type="barStack" height="250px" :options="barStackData"></LsEcharts>
    <!-- 渐变柱状图 -->
    <LsEcharts
      id="barGradient"
      type="barGradient"
      height="250px"
      :options="barGradientData"
    ></LsEcharts>
  </div>
</template>

<script setup>
import {
  configLineSeries,
  configBarSeries,
  configBarGradientSeries
} from '@/components/ls-echarts/js/config.js'
// 饼图
const pieData = {
  dataset: {
    source: [
      ['待整改', 26],
      ['待核查', 10],
      ['待复查', 2]
    ]
  }
}
// 折线
const lineData = {
  series: configLineSeries({
    count: 6
  }),
  dataset: {
    source: {
      month: ['2022/05', '2022/06', '2022/07', '2022/08', '2022/09', '2022/10'],
      二氧化碳: [2, 1, 2, 9, 2, 1],
      烟雾报警: [1, 3, 4, 8, 3, 2],
      温度报警: [8, 6, 5, 1, 4, 1],
      传感器报警: [3, 4, 5, 4, 5, 1],
      压力报警: [7, 8, 3, 1, 4, 5],
      湿度报警: [1, 4, 3, 2, 2, 1]
    }
  }
}
// 柱状图
const barData = {
  series: configBarSeries({
    count: 5
  }),
  dataset: {
    source: {
      month: ['2022/05', '2022/06', '2022/07', '2022/08'],
      信息接报: [2, 1, 2, 9],
      应急事件: [8, 6, 5, 1],
      突发事件: [2, 3, 7, 1],
      舆情事件: [2, 3, 7, 1],
      其它事件: [5, 2, 1, 8]
    }
  }
}
// 柱状堆叠图
const barStackData = {
  series: configBarSeries({
    count: 5,
    stack: 'stack'
  }),
  dataset: {
    source: {
      month: ['2022/05', '2022/06', '2022/07', '2022/08'],
      信息接报: [2, 1, 2, 9],
      应急事件: [8, 6, 5, 1],
      突发事件: [2, 3, 7, 1],
      舆情事件: [2, 3, 7, 1],
      其它事件: [5, 2, 1, 8]
    }
  }
}
// 柱状渐变图
const barGradientData = {
  series: configBarGradientSeries({
    count: 2
  }),
  dataset: {
    source: {
      month: ['2022/05', '2022/06'],
      司机: [2, 1],
      小车: [8, 6]
    }
  }
}
</script>

<style scoped></style>
